<template>
	<div>
		<van-nav-bar title="维保预约" left-arrow right-text="维保历史" @click-left="goBack" @click-right="jump"></van-nav-bar>
		<van-form @submit="tj">
			<van-field name="radio" label="单选框">
				<template #input>
					<van-radio-group v-model="fromData.type" direction="horizontal">
						<van-radio name="0">常规维保</van-radio>
						<van-radio name="1">车辆维修</van-radio>
					</van-radio-group>
				</template>
			</van-field>

			<van-field clickable placeholder="点击选择城市" label="城市" v-model="city" @click="area=true"
				:rules="[{required:true,message:'选择'}]" />
			<van-popup v-model="area" position="bottom">
				<van-area @confirm="onChange" :area-list="areaList" @cancel="area=false" columns-num="2"></van-area>
			</van-popup>

			<van-field v-model="fromData.maintenanceServiceStationName" clickable @click="wb" placeholder="选择维保站"
				label="维保站"></van-field>
			<van-popup v-model="picker" position="bottom">
				<van-picker show-toolbar :columns="columns" @cancel="picker=false" @confirm="onPicker"></van-picker>
			</van-popup>

			<!-- 			<van-field v-model="fromData.appointTime" placeholder="请选择日期" label="日期" @click="rq=true"></van-field>
			<van-calendar v-model="rq" @confirm="onRq"></van-calendar> -->

			<van-field @click="time=true" v-model="fromData.appointTime" placeholder="请选择日期和时间" label="日期和时间"
				:rules="[{required:true,message:'请选择日期和时间'}]">
			</van-field>
			<van-popup v-model="time" position="bottom">
				<van-datetime-picker type="datetime" :min-date="new Date()" @confirm="onDate">
				</van-datetime-picker>
			</van-popup>

			<van-field label="维保车辆" v-model="userInfo.car.carName" :rules="[{required:true,message:'请填写信息'}]">
			</van-field>
			<van-field label="车牌" v-model="userInfo.car.licenseTag" :rules="[{required:true,message:'请填写信息'}]">
			</van-field>
			<van-field label="联系人" v-model="userInfo.user.userName" :rules="[{required:true,message:'请填写信息'}]">
			</van-field>
			<van-field label="联系电话" v-model="userInfo.user.phonenumber" :rules="[{required:true,message:'请填写信息'}]">
			</van-field>
			<div class="wx-card">
				<wxInfo v-for="(item,index) in wxList" :wxInfo="item" :key="index"></wxInfo>
			</div>
			<van-button type="info" native-type="submit">预约提交</van-button>
		</van-form>
	</div>
</template>

<script>
	import {
		areaList
	} from '@vant/area-data';
	import ajax from "../../util/request.js"
	import wxInfo from "../../components/wxInfo.vue"
	export default {
		data() {
			return {
				area: false,
				areaList: areaList,
				picker: false,
				rq: false,
				columns: null,
				time: false,
				city: null,
				fromData: {
					type: "0",
					maintenanceServiceStationId: null,
					maintenanceServiceStationName: null,
					deliveryTime: null,
					appointTime: null,
					maintenanceTime: null,
					customerName: null,
					carId: null,
					customerName: null,
					customerPhone: null,
					customerSignature: null
				},
				userInfo: {},
				wxList: []
			}
		},
		components: {
			wxInfo
		},
		methods: {
			onRq(value) {
				// console.log(value.getMonth(), value.getDate(), value.getFullYear())
				console.log(value.getFullYear() + "-" + value.getMonth() + "-" + value.getDate())
				this.fromData.appointTime = value.getFullYear() + "-" + value.getMonth() + "-" + value.getDate()
				this.rq = false
			},
			onDate(value) {
				let newDate = value.getFullYear() + "-" + value.getMonth() + "-" + value.getDate() + " " + value
					.getHours() + ":" + value.getMinutes()
				this.time = false
				this.fromData.appointTime = newDate
				console.log(newDate);
			},
			wb() {
				if (!this.columns) {
					this.$toast("该城市没有维保站点")
				} else {
					this.picker = true
				}
			},
			onPicker(value) {
				console.log(value)
				this.fromData.maintenanceServiceStationName = value
				this.picker = false
			},
			goBack() {
				this.$router.back()
			},
			jump() {
				this.$router.push('/ls')
			},
			onChange(value) {
				console.log(value[1].name)
				this.city = value[1].name
				ajax({
					url: "/dev-api/bs-vehicle-owner/maintenance-service-station/list",
					method: "POST",
					data: {
						cityId: value[1].code
					}
				}).then(res => {
					console.log(res.data)
					this.columns = res.data.map(e => {
						return e.serviceStationName
					})
				})
				this.area = false
			},
			getUserInfo() {
				console.log(JSON.parse(window.localStorage.getItem("userInfo")))
				this.userInfo = JSON.parse(window.localStorage.getItem("userInfo"))
				this.fromData.carId = this.userInfo.carId
			},
			tj() {
				console.log(this.fromData)
					ajax({
						url: "/dev-api/bs-vehicle-owner/maintenance-appointment",
						method: "POST",
						data: {
							...this.fromData
						}
					}).then(res => {
						console.log(res)
					})
			}
		},
		watch: {
			'fromData.type'(n, l) {
				console.log(n)
				if (n == "1") {
					ajax({
						url: "/dev-api/bs-vehicle-owner/maintenance-plan/randomList"
					}).then(res => {
						console.log(res.data)
						this.wxList = res.data
					})
				} else {
					this.wxList = []
				}
			}
		},
		created() {
			this.getUserInfo()
		}
	}
</script>

<style>
	.wx-card {
		height: 140px;
		width: 100%;
		overflow: hidden;
		overflow-y: auto;
	}
</style>
